<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>统计图表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="/public/static/css/font.css" />
    <link rel="stylesheet" href="/public/static/css/weadmin.css" />
  </head>
  <body>
    <div class="weadmin-body">
      <!-- <blockquote class="layui-elem-quote">
        特别声明：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC
        和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的
        Canvas 类库
        ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。WeAdmin提示：如需使用或者详细更多案例可以访问官网
        <a href="http://echarts.baidu.com/" style="color: red;">ECharts</a>。
      </blockquote> -->
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div id="main" style="width: 100%; height: 400px;"></div>
      <!-- <blockquote class="layui-elem-quote">
        注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，若要离线使用，请至Echarts官网下载。
      </blockquote> -->
    </div>
    <script src="/public/javascripts/echarts.js"></script>
    <script src="/public/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
      layui.extend({
        admin: '{/}/public/static/js/admin',
      })
      layui.use(['jquery', 'admin'], function () {
        var $ = layui.jquery,
          admin = layui.admin

        $.ajax({
          url: '/admin/statistics/data',
          type: 'GET',
          success: function (res) {
            const sourceData = res.data.arr

            // 处理列名
            const legendData = sourceData.map(
              (item) => item.doctors_category_name
            )
            // 处理各项数据
            const seriesData = sourceData.map((item) => {
              return {
                value: item.category_num,
                name: item.doctors_category_name,
              }
            })

            // 指定图表的配置项和数据
            var option = {
              title: {
                text: '各科室挂号数分布图',
                subtext: '纯属虚构',
                left: 'center',
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)',
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: legendData,
              },
              series: [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: seriesData,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                  },
                },
              ],
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'))

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)

            // category_num: 12
            // doctors_category_name: '财务科'
          },
        })
      })
    </script>
  </body>
</html>
